    <style include="cr-hidden-style">
      :host {
        --button-position-offset: 24px;
        bottom: 0;
        left: 0;
        padding: 48px 0;
        position: fixed;
        right: auto;
        user-select: none;
        z-index: 3;
      }

      :host-context([dir='rtl']) {
        left: auto;
        right: 0;
      }

      #zoom-buttons {
        left: var(--button-position-offset);
        opacity: 1;
        position: relative;
        right: auto;
        transition: opacity 250ms;
        transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
      }

      :host-context([dir='rtl']) #zoom-buttons {
        left: auto;
        right: var(--button-position-offset);
      }

      :host(:not([visible_])) #zoom-buttons {
        opacity: 0;
        transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
      }

      viewer-zoom-button {
        display: block;
      }

      /* A larger gap between the fit button and the bottom two zoom buttons. */
      #zoom-in-button {
        margin-top: 24px;
      }

      /* A small gap between the zoom in/zoom out buttons. */
      #zoom-out-button {
        margin-top: 10px;
      }
    </style>
    <div id="zoom-buttons">
      <viewer-zoom-button id="fit-button" on-fabclick="fitToggle"
          tooltips="$i18n{tooltipFitToPage},$i18n{tooltipFitToWidth}"
          keyboard-navigation-active="[[keyboardNavigationActive_]]"
          icons="pdf:fullscreen-exit cr:fullscreen">
      </viewer-zoom-button>
      <viewer-zoom-button id="zoom-in-button" icons="pdf:add"
          tooltips="$i18n{tooltipZoomIn}"
          keyboard-navigation-active="[[keyboardNavigationActive_]]"
          on-fabclick="zoomIn"></viewer-zoom-button>
      <viewer-zoom-button id="zoom-out-button" icons="pdf:remove"
          tooltips="$i18n{tooltipZoomOut}"
          keyboard-navigation-active="[[keyboardNavigationActive_]]"
          on-fabclick="zoomOut"></viewer-zoom-button>
    </div>
